<template>
    <div class="sky">
        <div class="sky-container">
            <div class="sky-container-title">
                <span>{{ skyImage.greeting }}，系统管理员</span>
            </div>
            <div class="sky-container-time">
                <div class="time-box-wrapper_2uIhb">
                    <div class="time-box_23JAo up-box_6gjvA">{{ hoursNow }}</div>
                    <div class="time-box_23JAo down-box_7u1gh">{{ hoursNow }}</div>
                </div>
                <div class="symbol_3Fj3z">:</div>
                <div class="time-box-wrapper_2uIhb">
                    <div class="time-box_23JAo up-box_6gjvA">{{ minutesNow }}</div>
                    <div class="time-box_23JAo down-box_7u1gh">{{ minutesNow }}</div>
                </div>
                <div class="symbol_3Fj3z">:</div>
                <div class="time-box-wrapper_2uIhb">
                    <div class="time-box_23JAo up-box_6gjvA">{{ secondsNow }}</div>
                    <div class="time-box_23JAo down-box_7u1gh">{{ secondsNow }}</div>
                </div>
            </div>
        </div>
        <div>
            <div class="buliding">
                <img :src="skyImage.building" style="width: 100%;" />
            </div>
            <div :class="['sky__phase', `sky__${currentPhase}`]">
                <!-- 如果是午夜阶段，则渲染星星 -->
                <div v-if="currentPhase === 'midnight'" id="sky__stars">
                    <div v-for="(star, index) in stars" :key="index" :style="star"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import skyDawn from '@/assets/images/sky__dawn.jpeg'
import buildingDawn from '@/assets/images/building__dawn.png'
import skyNoon from '@/assets/images/sky__noon.jpeg'
import buildingNoon from '@/assets/images/building__noon.png'
import skyDusk from '@/assets/images/sky__dusk.jpeg'
import buildingDusk from '@/assets/images/building__dusk.png'
import skyMidnight from '@/assets/images/sky__midnight.jpeg'
import buildingMidnight from '@/assets/images/building__midnight.png'

const stars = ref([
    { left: '46%', top: '55%' },
    { left: '21%', top: '40%' },
    { left: '53%', top: '53%' },
    { left: '65%', top: '58%' },
    { left: '49%', top: '43%' },
    { left: '53%', top: '15%' },
    { left: '33%', top: '24%' },
    { left: '99%', top: '89%' },
    { left: '52%', top: '83%' },
    { left: '6%', top: '73%' },
    { left: '8%', top: '71%' },
    { left: '96%', top: '58%' },
    { left: '47%', top: '36%' },
    { left: '40%', top: '21%' },
    { left: '40%', top: '30%' },
    { left: '86%', top: '7%' },
    { left: '38%', top: '12%' },
    { left: '11%', top: '1%' },
    { left: '33%', top: '56%' },
    { left: '83%', top: '12%' },
    { left: '63%', top: '64%' },
    { left: '53%', top: '84%' },
    { left: '50%', top: '2%' },
    { left: '77%', top: '52%' },
    { left: '82%', top: '23%' },
    { left: '29%', top: '20%' },
    { left: '56%', top: '56%' },
    { left: '69%', top: '94%' },
    { left: '15%', top: '57%' },
    { left: '33%', top: '35%' },
    { left: '33%', top: '94%' },
    { left: '57%', top: '13%' },
    { left: '4%', top: '60%' },
    { left: '18%', top: '84%' },
    { left: '68%', top: '55%' },
    { left: '75%', top: '11%' },
    { left: '73%', top: '64%' },
    { left: '72%', top: '81%' },
    { left: '91%', top: '96%' },
    { left: '35%', top: '67%' },
])

// 设置当前时间
const hoursNow = ref(0)
const minutesNow = ref(0)
const secondsNow = ref(0)
const currentPhase = ref('')

function updateSkyPhase() {
    const currentHour = new Date().getHours()
    let newPhase = ''

    if (currentHour >= 6 && currentHour < 13) {
        newPhase = 'dawn'
    } else if (currentHour >= 13 && currentHour < 18) {
        newPhase = 'noon'
    } else if (currentHour >= 18 && currentHour < 20) {
        newPhase = 'dusk'
    } else {
        newPhase = 'midnight'
    }

    if (newPhase !== currentPhase.value) {
        currentPhase.value = newPhase
    }
}

function padTime(value) {
    return value.toString().padStart(2, '0')
}

function updateTime() {
    const now = new Date()
    hoursNow.value = padTime(now.getHours())
    minutesNow.value = padTime(now.getMinutes())
    secondsNow.value = padTime(now.getSeconds())
}

const skyImages = {
    dawn: {
        greeting: '早上好',
        background: skyDawn,
        building: buildingDawn
    },
    noon: {
        greeting: '下午好',
        background: skyNoon,
        building: buildingNoon
    },
    dusk: {
        greeting: '晚上好',
        background: skyDusk,
        building: buildingDusk
    },
    midnight: {
        greeting: '夜深了',
        background: skyMidnight,
        building: buildingMidnight
    }
}

const skyImage = computed(() => skyImages[currentPhase.value] || skyImages.midnight)

onMounted(() => {
    updateSkyPhase() // 初始设置当前阶段
    updateTime() // 初始时间更新

    // 每秒更新时间
    const timeInterval = setInterval(updateTime, 1000)

    // 设置定时器，每分钟更新一次
    const intervalId = setInterval(() => {
        updateSkyPhase() // 更新天空阶段
    }, 60 * 1000) // 每分钟更新一次
})

// 组件卸载时清除定时器
// onUnmounted(() => {
//     clearInterval(timeInterval)
//     clearInterval(intervalId)
// })
</script>

<style lang="scss" scoped>
.sky {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.sky__phase {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    transition: opacity 0.2s;
}

.sky__dawn {
    background: linear-gradient(330deg, rgb(136 189 255), rgb(190 222 255), rgb(131 186 255), rgb(58 139 255));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sky__noon {
    background: linear-gradient(330deg, rgb(209 242 255), rgb(174 233 255), rgb(78 195 255), rgb(0, 145, 255));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sky__dusk {
    background: linear-gradient(330deg, rgb(255 254 191), rgb(255 204 129), rgb(255 163 97), rgb(255 117 0));

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sky__midnight {
    background: linear-gradient(330deg, rgb(88, 131, 195), rgb(59, 93, 146), rgb(38, 66, 111), rgb(20, 43, 81));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.buliding {
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: 0;
    height: 124px;
    width: 230px;
    opacity: .9;
}

.sky-container {
    position: absolute;
    top: 12px;
    left: 24px;
    z-index: 9;

    .sky-container-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 36px;
        color: #fff;
        padding-bottom: 6px;
    }

    .sky-container-time {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        line-height: 60px;
        color: #ffffff;
        color-scheme: dark;
        font-family: baidunumber-Medium;
    }
}

.time-box-wrapper_2uIhb {
    position: relative;
    display: flex;
    flex-direction: column;
}

.time-box_23JAo {
    width: 60px;
    position: relative;
    height: 60px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .1);
    color-scheme: dark;
}

.time-box_23JAo.up-box_6gjvA {
    clip-path: polygon(0 0, 100% 0, 100% 49%, 0 49%);
}

.time-box_23JAo.down-box_7u1gh {
    position: absolute;
    clip-path: polygon(0 51%, 100% 51%, 100% 100%, 0 100%);
}

.symbol_3Fj3z {
    margin: 0 6px;
    position: relative;
    top: -5px;
    font-family: PingFangSC-Medium;
}

#sky__stars>div {
    width: 2px;
    height: 2px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    opacity: .5;
}

@media (max-width: 1600px) {
    .buliding {
        display: none;
    }
}
</style>